<template>
    <div>
        <Header></Header>

        <div class="a">
            <router-link to="/archives">archives &nbsp</router-link>
            <router-link to="/categories">categories &nbsp</router-link>
            <router-link to="/tags">tags &nbsp</router-link>
            <router-link to="/index">index</router-link>
        </div>
        <el-row type="flex" justify="center">
            <el-col style="width:50%" class="aa">
                <el-tag
                    class="tags"
                    type="sucess"
                    v-for="(item,index) in tags"
                    :key="index"
                >{{item.tagsName}}</el-tag>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Header from './component/Header';
export default {
    name: 'Tags',
    components: { Header },
    data() {
        return {
            tags: []
        };
    },
    created() {
        const _this = this;
        this.$axios.get('http://39.106.115.234:8083/article/tags').then((res) => {
            console.log(res.data.data);
            _this.tags = res.data.data;
        });
    }
};
</script>

<style scoped>
.a {
    margin: 20px;
    border-width: 2px;
    border-color: '#ff00ff';
    background: #fac002;
}
.b {
    margin: 20px;
    border-width: 2px;
    border-color: '#ff00ff';
    background: #9eafaf;
    opacity: 0.3;
}
.page {
    margin: 0 auto;
    text-align: center;
}
.tags {
    margin: 20px;
    widows: 50px;
    height: 25px;
}.aa {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
</style>



